<template>
	<view class="earn">
		<gyd-navbar back-color="#fff" :title="title" :isBack="false"></gyd-navbar>

		<!--轮播图-->
		<template v-if="bannerList.length>0">
			<gyd-swiper :list="bannerList"></gyd-swiper>
		</template>

		<view class="models">
			<view class="item" @click="pageRoute('/servePages/earn/qrcode')">
				<view class="tex">
					<view class="tit">我的推广码</view>
					<view class="des">分享好友扫码</view>
				</view>

			</view>
			<view class="item" @click="pageRoute('/servePages/earn/team')">
				<view class="tex">
					<view class="tit">我的团队</view>
					<view class="des">查看我的团队</view>
				</view>
			</view>
		</view>

		<!--挣钱方式-->
		<view class="mode">
			<view class="struct">多种方式任您选 去挣钱</view>
			<view class="list">
				<view class="item" @click="goPage(item)" v-for="(item,index) in taskList" :key="index">
					<view class="thnum">
						<image :src="item.logo"></image>
					</view>
					<view class="info">
						<view class="tit">{{item.title}}</view>
						<view class="desc">{{item.description}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="explant">
			<view class="item" @click="pageRoute('/servePages/earn/help')">
				<view class="leftinfo">
					<view class="icon">
						<image :src="imgHost+'/static/images/icon/bz.png'" mode="aspectFill"></image>
					</view>
					<view class="con">
						<view class="title">赚钱帮助中心</view>
						<view class="desc">帮助说明看这里</view>
					</view>
				</view>
				<view class="more"><uni-icons type="right" size="24" color="#717171"></uni-icons></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '挣钱',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		bannerList: [],
		taskList: [],
		lon: '',
		lat: '',
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		getBanner();
		getTask();
	}

	function getBanner() {
		request.get('content/banner', {
			position_id: 13
		}).then(res => {
			console.log('轮播图', res);
			state.bannerList = res.data;
		})
	}

	function getTask() {
		let params = {
			channel_id: 20,
			limit: 20,
		};
		request.get('content/getColumnArticle', params).then(res => {
			console.log('挣钱方式', res);
			state.taskList = res.data.list;
		})
	}

	function goPage(item) {
		if (item.id == 8) {
			util.showTip('功能完善中');
		} else {
			pageRoute(item.link + '?id=' + item.id);
		}
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		bannerList,
		taskList,
		lon,
		lat,
	} = toRefs(state);
</script>

<style lang="scss">
	.earn {
		padding: $m24;

		.banner {
			width: 100%;
			height: 280rpx;
			margin: 0 0 20rpx 0;
		}

		.models {
			display: flex;
			margin-top: $m24;

			.item {
				flex: 1;
				height: 180rpx;

				.tex {
					margin: 30rpx 0 0 20rpx;

					.tit {
						margin: 0 0 10rpx 0;
						font-size: 34rpx;
						color: #fff;
						font-weight: 600;
					}

					.des {
						font-size: 26rpx;
						color: #fff;
					}
				}



				&:nth-child(1) {
					margin-right: 15rpx;
					background: url($web_url+'/static/images/tgm.png') no-repeat center;
					background-size: 100% 100%;
				}

				&:nth-child(2) {
					margin-left: 15rpx;
					background: url($web_url+'/static/images/td.png') no-repeat center;
					background-size: 100% 100%;
				}
			}
		}

		//方式列表
		.mode {
			margin: 20rpx 0 20rpx 0;

			.struct {
				font-size: 34rpx;
				line-height: 80rpx;
				color: #222a52;
				font-weight: 600;
			}

			.list {
				background: #fff;
				border-radius: 12rpx;
				padding: 20rpx;

				.item {
					display: flex;
					align-items: center;
					margin: 0 0 24rpx 0;
					padding: 0 0 24rpx 0;
					border-bottom: #f7f7fb solid 1rpx;

					&:nth-last-child(1) {
						margin-bottom: 0;
						padding-bottom: 0;
						border: none;
					}

					.thnum {
						width: 220rpx;
						height: 140rpx;
						margin: 0 20rpx 0 0;

						image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.info {
						flex: 1;

						.tit {
							line-height: 60rpx;
							font-size: 30rpx;
							color: #222a52;
							font-weight: 600;
						}

						.desc {
							font-size: 24rpx;
							color: #7c859c;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
							word-wrap: break-word;
						}
					}
				}
			}
		}

		//收益明细和帮助
		.explant {
			.item {
				display: flex;
				align-items: center;
				background: #fff;
				border-radius: 12rpx;
				padding: 10rpx 20rpx;
				margin: 0 0 20rpx 0;

				.leftinfo {
					flex: 1;
					display: flex;
					align-items: center;

					.icon {
						width: 100rpx;
						height: 100rpx;
						margin: 0 20rpx 0 0;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.con {
						.title {
							font-size: 32rpx;
							color: #222a52;
						}

						.desc {
							font-size: 26rpx;
							color: #7c859c;
						}
					}
				}

				.more {}
			}
		}
	}
</style>